import columnsData, { ColumnsItem } from './data'
import React, { useRef } from 'react';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { getReleaseRecordList } from './service'
import TableTitle from '@/components/TableTitle';

export default () => {
  // 表头赋值
  const columns: ProColumns<ColumnsItem>[] = columnsData
  // 定义金额单元格
  const amount = (text: any) => {
    return [
      <p
        key='amount'
        style={{ textAlign: 'right', margin: 0 }}
      >
        {typeof text === 'number' ? text.toFixed(6) : null}
      </p>
    ]
  }
  // 币种单元格
  const ccy = (text: any, record: ColumnsItem) => [
    <span
      key='ccy'>
      {record.ccy}
    </span>
  ]
  // 列渲染样式赋值
  columns.forEach(item => {
    item.dataIndex === 'amt' ? item.render = amount : undefined
    item.dataIndex === 'handlingCharge' ? item.render = amount : undefined
    item.dataIndex === 'totalDailyInvestment' ? item.render = amount : undefined
    item.dataIndex === 'ccy1' ? item.render = ccy : undefined
    item.dataIndex === 'ccy2' ? item.render = ccy : undefined
  })
  // Table action 的引用，便于自定义触发
  const actionRef = useRef<ActionType>();

  return (
    <div>
      {/* 表格 */}
      <ProTable<ColumnsItem>
        scroll={{ x: 900 }}
        bordered
        headerTitle={<TableTitle title='积分兑换' />}
        columns={columns}
        actionRef={actionRef}
        // 请求获取的数据
        request={
          async params => {
            let res = await getReleaseRecordList({ ...params, pageNum: params.current })
            console.log(res);


            const result = {
              data: res.body.list,
              total: res.body.total,
            }
            return result
          }
        }
        // 本地储存表格列的显示参数
        columnsState={{
          persistenceKey: 'releaseRecordList',
          persistenceType: 'localStorage',
        }}
        // 每行表格的key
        rowKey="txSerNo"
        // 搜索表单布局配置
        search={{
          labelWidth: 'auto',
        }}
        // 分页相关配置
        pagination={{
          // 初始页面数据条数
          pageSize: 10,
        }}
        dateFormatter="string"
      />
    </div>
  );
};